<template>
  <div class="wx-modal" @click="hideModal" v-if="isShow">
    <div class="modal-main" ref="contentBox">
      <img src="@/assets/img/wx.jpg" width="240" />
      <p class="desc">微信客服协助</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { animateNow } from "@/directives/modules/animate/events";
import { timeout } from "@/utils/util";

const emits = defineEmits(["hideModal"]);

const contentBox = ref<Element>();

const isShow = ref(false);

const hideModal = () => {
  isShow.value = false;
  emits("hideModal");
};

const showModal = async () => {
  isShow.value = true;
  await timeout(360);
  animateNow(contentBox.value, {
    classes: "op1 animate__flip",
    isCustom: true,
  });
};

defineExpose({
  showModal,
});
</script>

<style>
.wx-modal {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  .modal-main {
    padding: 20px;
    background-color: #fff;
    opacity: 0;
    transition: 0.5s all;
    .desc {
      line-height: 40px;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>
